<template>
  <div class="top_o">
    <el-card class="box-card" :style="{height:WindowHeight - cardHeight + 'px'}">
      <el-row>
        <el-col :span="5" class="aside">
          <el-input v-model="searchTxt" class="serach" placeholder="请输入内容" prefix-icon="el-icon-search" />
          <el-table
            ref="singleTable"
            :data="list"
            border
            highlight-current-row
            :header-row-style="{ display: 'none' }"
            :max-height="WindowHeight - listHeight"
            @current-change="setIndex"
          >
            <el-table-column prop="name" />
          </el-table>
        </el-col>
        <el-col :span="18" :offset="1">
          <!-- <el-button size="small" type="primary" @click="newZD(showList)">新增</el-button> -->
          <vxe-toolbar perfect>
            <template v-slot:buttons>
              <vxe-button icon="fa fa-plus" status="perfect" @click="newZDB">新增</vxe-button>
              <!-- <vxe-button icon="fa fa-trash-o" size="small" class="addBtn" status="perfect" type="primary" @click="newZDB"></vxe-button> -->

              <!-- <vxe-button icon="fa fa-trash-o" status="perfect">移除</vxe-button> -->
              <!-- <vxe-button icon="fa fa-save" status="perfect">保存</vxe-button> -->
              <!-- <vxe-button icon="fa fa-mail-reply" status="perfect">还原</vxe-button> -->
            </template>
          </vxe-toolbar>
          <el-table ref="multipleTable" v-loading="listLoading" :data="showList" fit border stripe>
            <el-table-column
              v-for="(item, index) in tableColumnList"
              :key="index"
              header-align="center"
              :label="item.propName"
              :property="item.prop"
              :align="setAlign(item)"
            >
              <template slot-scope="scope">
                <div v-if="eidtIndex != scope.$index&&showList!=''">
                  <span v-text="ifType(showList[scope.$index][tableColumnList[index]['prop']])" />
                </div>
                <el-input
                  v-if="eidtIndex === scope.$index"
                  :ref="tableColumnList[index]['prop']+scope.$index"
                  v-model="showList[scope.$index][tableColumnList[index]['prop']]"
                  size="small"
                  placeholder="请输入内容"
                  @blur="titleError"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="230px">
              <template slot-scope="scope">
                <el-button v-if="eidtIndex != scope.$index" size="small" type="warning" @click="editZD(showList,scope.row,scope.$index)">编辑</el-button>
                <el-button v-if="eidtIndex == scope.$index" size="small" type="success" @click="sendZD(showList,scope.row,scope.$index)">保存</el-button>
                <!-- <el-button size="small"  icon="el-icon-document" type="primary" v-if="eidtIndex != scope.$index" @click="showInput(scope.$index, scope.row)">编辑</el-button>
                <el-button size="small"  type="primary" icon="el-icon-check" v-if="eidtIndex == scope.$index" @click="sendJianTingName(scope.$index, scope.row)">完成</el-button> -->
                <el-button size="small" type="danger" @click="delZD(showList,scope.row,scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
    <component :is="configName" @GetList="setLst" />
  </div>
  <!-- </div> -->
</template>

<script>
import Axios from 'axios'
import Vue from 'vue'

export default {
  data() {
    return {
      WindowHeight: document.body.clientHeight,
      configName: '',
      addPath: {
        configName: 'addZDB',
        // src\views\rfcwgl\ziDianB\append\ziDianBAppend\index.vue
        configFilePath: 'rfcwgl/ziDianB/append/ziDianBAppend/index.vue'
      },
      showPath: {
        configName: 'showchuchailvfbx',
        configFilePath: 'rfcwgl/chaiLvFBX/show/chaiLvFBXShow/index.vue'
      },
      cardHeight: 84,
      tabHeight: 180,
      listHeight: 215,
      eidtIndex: -1,
      eidtOff: false,
      searchTxt: '',
      listLoading: true,
      activeIndex: -1,
      list: [],
      showList: [],
      tableColumnList: [], // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据  你要用的话可以调用后台接口获取tableColumnList，注意数据格式
      dataList: [], // 这里为了简便我就没有调用后台接口获取数据，直接写的假数据
      checkArr: [],
      isUndefen: true
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowH.height
    },
    tagsView() {
      return this.$store.state.settings.tagsView
    }
  },
  watch: {
    windowHeight: function(old, newd) {
      // console.log(old)
      this.WindowHeight = old
    },
    tagsView: function(old, newd) {
      this.ifTagsView(old)
    }
  },
  created() {
    this.getList()
    this.ifTagsView(this.$store.state.settings.tagsView)
  },

  mounted() {
  },
  methods: {
    ifTagsView(data) {
      if (data) {
        this.cardHeight = 84
        this.tabHeight = 180
        this.listHeight = 215
      } else {
        this.cardHeight = 50
        this.tabHeight = 155
        this.listHeight = 180
      }
    },
    openWndow(e) {
      this.configName = Vue.component(e.configName, resolve => {
        require([`@/views/${e.configFilePath}`], resolve)
      })
    },
    newZDB() {
      this.openWndow(this.addPath)
    },
    newZD(data) {
      console.log()
      if (this.eidtOff) {
        this.$confirm('请保存上一条信息')
          .then(_ => {
          })
          .catch(_ => {})
        return
      }
      const obj = {}
      console.log(this.tableColumnList)
      this.tableColumnList.forEach(item => {
        obj[item.prop] = ''
      })
      obj.id = this.showList.length > 0 ? this.showList[this.showList.length - 1].id + 1 : 1
      console.log(obj)
      this.showList.push(obj)
      console.log(obj)
      console.log(this.showList)
      this.eidtIndex = this.showList.length - 1
      this.eidtOff = true
    },
    editZD(data, row, index) {
      console.log(index)
      console.log('编辑测试' + this.eidtIndex + '__' + this.eidtOff)

      if (this.eidtOff) {
        this.$confirm('请保存上一条信息')
          .then(_ => {
          })
          .catch(_ => {})
        return
      }
      this.eidtIndex = index
      this.eidtOff = true
      console.log('编辑测试' + this.eidtIndex + '__' + this.eidtOff)
    },
    titleError(e) {
      console.log(e)
      if (e.target.value === '') {
        // e.view.focus()
      }
    },
    sendZD(data, row, index) {
      console.log(data)
      console.log(row)
      console.log(index)
      if (this.eidtOff) {
        this.isUndefen = true
        var ref = ''
        for (const key in row) {
          if (row[key] === '') {
            this.isUndefen = false
            ref = key
            // console.log('为空的' + '___' + ref)
            break
          }
        }
        // console.log(this.isUndefen)
        if (!this.isUndefen) {
          this.$confirm('输入为空，请输入')
            .then(_ => {
            // console.log(`${ref}${index}`)
            // console.log(this.$refs)
              console.log(this.$refs[`${ref}${index}`])
              this.$refs[`${ref}${index}`][0].focus()
            })
            .catch(_ => {})
        } else {
          this.$confirm('你确定要更改吗？')
            .then(_ => {
              this.eidtIndex = -1
              this.eidtOff = false
            })
            .catch(_ => {})
        }
      }
    },
    delZD(data, row, index) {
      this.$confirm('你确定要删除吗？')
        .then(_ => {
          // data.splice(index, 1)
          if (index === this.eidtIndex) {
            console.log('相等' + this.eidtIndex + '__' + this.eidtOff)
            this.eidtIndex = -1
            this.eidtOff = false
            console.log('测试' + this.eidtIndex + '__' + this.eidtOff)
          }
          data.splice(index, 1)
        })
        .catch(_ => {})
    },
    setAlign(row) {
      const type = row.type
      if (type === 'text') {
        return 'left'
      } else if (type === 'date') {
        return 'center'
      } else if (type === 'string') {
        return 'right'
      } else if (type === 'boolean') {
        return 'center'
      }
    },
    setIndex(item) {
      this.activeIndex = item.id
      this.getRow(item.id)
    },
    getList() {
      const that = this
      Axios.get('/api/getZiDian').then(res => {
        this.list = res.data
        // console.log(res.data)
        const id = res.data[0].id
        this.activeIndex = id
        that.getRow(id)
      })
    },
    getRow(id) {
      const that = this
      Axios.get('/api/getRow', { data: { id: id }}).then(res => {
        this.tableColumnList = res.data
        that.getData(id)
      })
    },
    getData(id) {
      // const that = this
      Axios.get('/api/getZiDianTbdata', { data: { id: id }}).then(res => {
        this.showList = res.data
        this.listLoading = false
        // that.getData(id)
      })
    },
    queryFn() {
      // 调用后台接口获取tableColumnList和dataList的方法写在这里
      // getData().then(response =>{
      //   this.tableColumnList = response.data.tableColumnList
      //   this.dataList = response.data.dataList
      // })
      this.showList = this.dataList
    },
    clearQuery() {
      this.query.name = ''
      this.queryFn()
    },
    menuChange(item) {
      // 注意  我这里都用的假数据，要从后台获取tableColumnList和dataList的时候
      // ，每一次调用menuChange都要重新获取tableColumnList和dataList，保证属性和数据是对应的
      let flag = true
      for (var i = 0; i < this.checkArr.length; i++) {
        if (this.checkArr[i] === item.propName) {
          flag = false
          break
        }
      }
      if (!flag) {
        this.tableColumnList.push(item)
      }
      if (flag) {
        Array.prototype.contains = function(obj) {
          var j = this.length
          while (j--) {
            if (this[j] === obj) {
              return j // 返回的这个 i 就是元素的索引下标，
            }
          }
          return false
        }
        this.tableColumnList.splice(this.tableColumnList.contains(item), 1)
      }
    },
    ifType(data) {
      if (data === 'Object') {
        return '对象'
      } else if (data === 'String') {
        return '字符串'
      } else if (data === 'String') {
        return '字符串'
      } else if (data === 'Boolean') {
        return '布尔'
      } else {
        return data
      }
    },
    setLst(data) {
      this.list = data
    }
  }
}
</script>

<style lang="scss" scoped>
.serach{
  margin-bottom:15px;
}
::v-deep .el-tabs__header {
  margin: 0px;
}
</style>
